<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .nav {
            width: 600px;
            margin: 0 auto;
            text-align: center;
            line-height: 40px;
            display: flex;
        }

        .nav li {
            flex: 1;
            border: 1px solid #333;
        }

        .nav li+li {
            border-left: 0;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <!-- <li data-index="0">nav_01</li>
        <li data-index="1">nav_02</li>
        <li data-index="2">nav_03</li>
        <li data-index="3">nav_04</li>
        <li data-index="4">nav_05</li>
        <li data-index="5">nav_06</li> -->
        <li>nav_01</li>
        <li>nav_02</li>
        <li>nav_03</li>
        <li>nav_04</li>
        <li>nav_05</li>
        <li>nav_06</li>
    </ul>
</body>
<script>




    // 闭包
    // 有权访问另一个函数作用域中变量的函数
    // 简单的说: 一个函数(fn)在执行过程中返回了另一个函数(func),该函数(func)可以访问父作用域(fn)中的变量

    // 如何形成闭包?
    // 1. 函数在执行过程返回了另一个函数(引用类型) (也可以是对象或数组等引用类型 => 包含函数)
    // 2. 返回的函数中使用了父作用域的变量
    // 3. 在函数的外部,有变量来引用 引用类型


    // 闭包的优缺点
    // 优点:
    // 1. 减少全局变量的使用   
    // 2. 被引用的父作用域不会被销毁 => 一直被子函数的作用域链引用 => 数据不会被释放(记录变化)
    // 3. 可以在函数外部访问函数内容的数据

    // 缺点:
    // 1. 数据在函数中一直被引用 => 得不到释放 => 占内存 
    // 2. 频繁的使用闭包 可能导致内存泄露 
    // 3. 可以在函数外部访问函数内容的数据 => 数据不安全

    function fn() {
        var a = 10
        return {
            add: function () {
                a++
                console.log(a)
                return a
            },
            reduce: function () {
                a--
                console.log(a)
                return a
            },
            set: function (num) {
                a = num
                console.log(a)
                return a
            }
        }
    }
    var res = fn()
    res.add()
    res.add()
    res.add()
    res.set(200)
    res.add()



    // 点击导航 => 打印对应的元素和下标
    var liList = document.querySelectorAll(".nav li")
    for (var i = 0; i < liList.length; i++) {
        function fn(i) {
            liList[i].onclick = function () {//liList[i]形参 => 局部变量
                console.log("点击", this, i)
            }
        }
        fn(i)
    }
</script>

</html>